<div *ngIf="!loadingPatterns;then showPatterns;else loadPatterns"></div>
<ng-template #showPatterns>
    <form nz-form nzLayout="vertical" *ngIf="pattern">
        <nz-row>
            <nz-col [nzSpan]="17">
                <nz-row>
                    <nz-col [nzSpan]="12">
                        <nz-form-item>
                            <nz-form-label>Name</nz-form-label>
                            <nz-form-control>
                                <input nz-input type="text" name="name" [(ngModel)]="pattern.name" [disabled]="loading">
                            </nz-form-control>
                        </nz-form-item>
                    </nz-col>
                    <nz-col [nzSpan]="11" [nzOffset]="1">
                        <nz-form-item>
                            <nz-form-label>Type</nz-form-label>
                            <nz-form-control>
                                <nz-select nzShowSearch name="type" nzPlaceHolder="{{'common_select' | translate}}"
                                           [nzDisabled]="loading" [(ngModel)]="pattern.type" #selectType>
                                    <nz-option *ngFor="let option of workerModelTypes" [nzValue]="option" [nzLabel]="option">
                                    </nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                    </nz-col>
                </nz-row>
                <nz-row *ngIf="pattern.type && pattern.type === 'docker'">
                   <nz-col [nzSpan]="24">
                       <nz-form-item>
                           <nz-form-label>Shell command</nz-form-label>
                           <nz-form-control>
                               <input nz-input name="shell" type="text" placeholder="sh -c" name="shell"
                                      [(ngModel)]="pattern.model.shell">
                           </nz-form-control>
                       </nz-form-item>
                   </nz-col>
                </nz-row>
                <nz-row>
                    <nz-col [nzSpan]="24">
                        <nz-form-item>
                            <nz-form-label>Pre worker command</nz-form-label>
                            <nz-form-control>
                                 <textarea nz-input name="pre_cmd" [(ngModel)]="pattern.model.pre_cmd" [disabled]="loading"></textarea>
                            </nz-form-control>
                        </nz-form-item>
                    </nz-col>
                </nz-row>
                <nz-row>
                    <nz-col [nzSpan]="24">
                        <nz-form-item>
                            <nz-form-label>Main worker command <i nz-icon nzType="question-circle" nzTheme="outline"></i></nz-form-label>
                            <nz-form-control>
                                <input nz-input type="text" name="cmd" [(ngModel)]="pattern.model.cmd" [disabled]="loading">
                            </nz-form-control>
                        </nz-form-item>
                    </nz-col>
                </nz-row>
                <ng-container *ngIf="pattern.type && pattern.type === 'docker'">
                    <nz-row>
                        <nz-form-item>
                            <nz-form-label nz-tooltip [nzTooltipTitle]="'worker_model_env_tooltip' | translate"> {{'worker_model_env' | translate}} <i nz-icon nzType="question-circle" nzTheme="outline"></i></nz-form-label>
                        </nz-form-item>
                    </nz-row>
                    <ng-container *ngIf="pattern.model.envs">
                        <nz-row *ngFor="let envName of envNames" class="envLine">
                            <nz-col [nzSpan]="11">
                                <input nz-input type="text" name="name-{{envName}}" [placeholder]="'common_name' | translate"
                                       [value]="envName" disabled>
                            </nz-col>
                            <nz-col [nzSpan]="10" nzOffset="1">
                                <input nz-input type="text" name="value-{{envName}}" [placeholder]="'common_value' | translate"
                                       [(ngModel)]="pattern.model.envs[envName]">
                            </nz-col>
                            <nz-col [nzSpan]="1" nzOffset="1">
                                <button nz-button nzDanger nzType="primary" (click)="clickDeleteEnv(envName)">
                                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                                </button>
                            </nz-col>
                        </nz-row>
                    </ng-container>
                    <nz-row class="envLine">
                        <nz-col [nzSpan]="11">
                            <input nz-input type="text" name="newEnvName" [placeholder]="'common_name' | translate"
                                   [(ngModel)]="newEnvName">
                        </nz-col>
                        <nz-col [nzSpan]="10" nzOffset="1">
                            <input nz-input type="text" name="newEnvValue" [placeholder]="'common_value' | translate"
                                   [(ngModel)]="newEnvValue">
                        </nz-col>
                        <nz-col [nzSpan]="1" nzOffset="1">
                            <button nz-button nzType="primary"  (click)="clickAddEnv()">
                                <i nz-icon nzType="plus" nzTheme="outline"></i>
                            </button>
                        </nz-col>
                    </nz-row>
                </ng-container>
                <nz-row *ngIf="pattern.type && pattern.type !== 'docker'">
                    <nz-col [nzSpan]="24">
                        <nz-form-item>
                            <nz-form-label>{{'worker_model_post_cmd' | translate}}</nz-form-label>
                            <nz-form-control>
                                <textarea nz-input name="post_cmd" [(ngModel)]="pattern.model.post_cmd"
                                          [disabled]="loading"></textarea>
                            </nz-form-control>
                        </nz-form-item>
                    </nz-col>
                </nz-row>
                <nz-row class="footer">
                    <nz-col [nzSpan]="12">
                        <button nz-button nzDanger nzType="primary" nz-popconfirm
                        nzPopconfirmTitle="Are you sure you want to delete this pattern ?" (nzOnConfirm)="clickDeleteButton()">
                            <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
                        </button>
                    </nz-col>
                    <nz-col [nzSpan]="12" class="alignRight">
                        <button nz-button nzType="primary" [nzLoading]="loading"
                                [disabled]="!pattern.type || !pattern.name || !pattern.model.cmd"
                                (click)="clickSaveButton()">
                            <i nz-icon nzType="save" nzTheme="outline"></i>{{ (pattern.id ? 'btn_save' : 'btn_add') | translate }}
                        </button>
                    </nz-col>
                </nz-row>
            </nz-col>
            <nz-col [nzSpan]="6" [nzOffset]="1">
                <div class="nzSegment">
                    <h2><i nz-icon nzType="book" nzTheme="outline"></i>Tips</h2>
                    <p>See Worker Model Pattern documentation:
                        <a class="item" target="_blank" rel="noopener noreferrer"
                           href="#" [routerLink]="['/docs', 'docs', 'concepts', 'worker-model', 'patterns']">
                            here</a>
                    </p>
                </div>
            </nz-col>
        </nz-row>
    </form>
</ng-template>
<ng-template #loadPatterns>
    <nz-spin nzTip="loading..."></nz-spin>
</ng-template>
